<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
    <meta charset="utf-8">

    <title>fullpage.js - Tests</title>
    <link rel="stylesheet" type="text/css" href="../src/fullpage.css?v=22" />

    <style>
    #qunit-fixture{

    }
    .fullpage-layout{
        display: none;
    }
    .fullpage-layout.active{
        display: block;
    }
    #menu{
        position:fixed;
        top:0;
        left:0;
        height: 40px;
        z-index: 70;
        width: 100%;
        padding: 0;
        margin:0;
    }
    #menu-two{
        position:fixed;
        top:0;
        left:500px;
        height: 40px;
        z-index: 70;
        width: 100%;
        padding: 0;
        margin:0;
    }
    .normalscroll{
        overflow: scroll;
        height: 300px;
    }
    .normalScroll h1{
        font-size: 50px;
    }
    .content{
        height: 1400px;
    }
    </style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">

    <ul id="menu" class="menu">
        <li data-menuanchor="page1"><a href="#page1">One</a></li>
        <li data-menuanchor="page2"><a href="#page2">Two</a></li>
        <li data-menuanchor="page3"><a href="#page3">Three</a></li>
        <li data-menuanchor="page4"><a href="#page4">Four</a></li>
    </ul>

    <ul id="menu-two" class="menu">
        <li data-menuanchor="page1"><a href="#page1">One</a></li>
        <li data-menuanchor="page2"><a href="#page2">Two</a></li>
        <li data-menuanchor="page3"><a href="#page3">Three</a></li>
        <li data-menuanchor="page4"><a href="#page4">Four</a></li>
    </ul>

    <div id="fullpage" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2" style="background-color: blue;">
            <div class="slide"> Slide 1 </div>
            <div class="slide"> Slide 2 </div>
            <div class="slide"> Slide 3 </div>
            <div class="slide"> Slide 4 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-slides-with-anchor" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2" style="background-color: blue;">
            <div class="slide" data-anchor="slide1"> Slide 1 </div>
            <div class="slide" data-anchor="slide2"> Slide 2 </div>
            <div class="slide" data-anchor="slide3"> Slide 3 </div>
            <div class="slide" data-anchor="slide4"> Slide 4 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-sections-and-slides-with-data-anchor" class="fullpage-layout">
        <div class="section" data-anchor="page1" id="section1">Some section</div>
        <div class="section" data-anchor="page2" id="section2" style="background-color: blue;">
            <div class="slide" data-anchor="slide1"> Slide 1 </div>
            <div class="slide" data-anchor="slide2"> Slide 2 </div>
            <div class="slide" data-anchor="slide3"> Slide 3 </div>
            <div class="slide" data-anchor="slide4"> Slide 4 </div>
        </div>
        <div class="section" data-anchor="page3" id="section3">Some section</div>
        <div class="section" data-anchor="page4" id="section4">Some section</div>
    </div>

    <div id="fullpage-moveSlideRight" class="fullpage-layout">
        <div class="section" id="section2">
            <div class="slide" id="slide-1-1" data-anchor="slide1"> Slide 1 </div>
            <div class="slide" id="slide-1-2" data-anchor="slide2"> Slide 2 </div>
            <div class="slide" id="slide-1-3" data-anchor="slide3"> Slide 3 </div>
            <div class="slide" id="slide-1-4" data-anchor="slide4"> Slide 4 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>


    <div id="fullpage-moveSlideLeft" class="fullpage-layout">
        <div class="section" id="section2">
            <div class="slide" id="slide-1-1"> Slide 1 </div>
            <div class="slide" id="slide-1-2"> Slide 2 </div>
            <div class="slide" id="slide-1-3"> Slide 3 </div>
            <div class="slide active" id="slide-1-4"> Slide 4 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>


    <div id="fullpage-single-slide" class="fullpage-layout">
        <div class="section" id="section1">
            <div class="slide" id="slide-1-1"> Slide 1 </div>
        </div>
        <div class="section" id="section2">Some section</div>
        <div class="section" id="section3">Some section</div>
    </div>

    <div id="fullpage-single-slide-in-second-section" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2">
             <div class="slide" id="slide-2-1"> Slide 1 </div>
        </div>
        <div class="section" id="section3">Some section</div>
    </div>


    <!-- Active slide in 1st section active -->
    <div id="fullpage-second-slide-active" class="fullpage-layout">
        <div class="section" id="section2">
            <div class="slide" id="slide-1-1"> Slide 1 </div>
            <div class="slide active" id="slide-1-2"> Slide 1 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-middle-slide-active" class="fullpage-layout">
        <div class="section" id="section1">
            <div class="slide" id="slide-1-1"> Slide 1 </div>
            <div class="slide active" id="slide-1-2"> Slide 1 </div>
            <div class="slide" id="slide-1-3"> Slide 3 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-first-slide-active" class="fullpage-layout">
        <div class="section" id="section2">
            <div class="slide active" id="slide-1-1"> Slide 1 </div>
            <div class="slide" id="slide-1-2"> Slide 1 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>
    <!-- End Active slide in second section active -->


    <!-- Active slide in second active section -->
    <div id="fullpage-first-slide-active-in-2nd-section" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2">
            <div class="slide active" id="slide-1-1"> Slide 1 </div>
            <div class="slide" id="slide-1-2"> Slide 1 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-middle-slide-active-in-2nd-section" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2">
            <div class="slide" id="slide-1-1"> Slide 1 </div>
            <div class="slide active" id="slide-1-2"> Slide 2 </div>
            <div class="slide" id="slide-1-3"> Slide 3 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>
    <!-- End Active slide in second section active -->


    <!-- Second section active -->
    <div id="fullpage-2nd-active-section" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section active" id="section2">Some section</div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-first-slide-active-in-2nd-active-section" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section active" id="section2">
            <div class="slide active" id="slide-1-1"> Slide 1 </div>
            <div class="slide" id="slide-1-2"> Slide 2 </div>
            <div class="slide" id="slide-1-3"> Slide 3 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-middle-slide-active-in-2nd-active-section" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section active" id="section2">
            <div class="slide" id="slide-1-1"> Slide 1 </div>
            <div class="slide active" id="slide-1-2"> Slide 2 </div>
            <div class="slide" id="slide-1-3"> Slide 3 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-sigle-slide-active-in-2nd-active-section" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section active" id="section2">
             <div class="slide" id="slide-2-1"> Slide 1 </div>
        </div>
        <div class="section" id="section3">Some section</div>
    </div>
    <!-- End Second section active -->


    <!-- 4th section active -->
    <div id="fullpage-last-section-active" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2">
            <div class="slide" id="slide-1-1"> Slide 1 </div>
            <div class="slide" id="slide-1-2"> Slide 2 </div>
            <div class="slide" id="slide-1-3"> Slide 3 </div>
        </div>
        <div class="section" id="section3">Some section</div>
        <div class="section active" id="section4">Some section</div>
    </div>
    <!-- End 4th section active -->


    <div id="fullpage-all-sections-with-slides" class="fullpage-layout">
        <div class="section" id="section1">
            <div class="slide" id="slide-1-1"> Slide 1 </div>
            <div class="slide" id="slide-1-2"> Slide 1 </div>
        </div>
        <div class="section" id="section2">
            <div class="slide" id="slide-2-1"> Slide 1 </div>
            <div class="slide" id="slide-2-2"> Slide 1 </div>
        </div>
        <div class="section" id="section3">
            <div class="slide" id="slide-3-1"> Slide 1 </div>
            <div class="slide" id="slide-3-2"> Slide 1 </div>
        </div>
    </div>

    <div id="fullpage-no-slides" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2">Some section</div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>


    <div id="fullpage-with-name-element" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2"><a name="anchor-as-name" />Some section</div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-with-id-element" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section" id="section2"><a id="anchor-as-id" href="">Some section</a></div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>

    <div id="fullpage-nav-tooltips" class="fullpage-layout">
        <div class="section" id="section1" data-tooltip="demo1">Some section</div>
        <div class="section" id="section2" data-tooltip="demo2">Some section</div>
        <div class="section" id="section3" data-tooltip="demo3">Some section</div>
        <div class="section" id="section4" data-tooltip="demo4">Some section</div>
    </div>

    <div id="fullpage-normalscrollelements" class="fullpage-layout">
        <div class="section" id="section1">
            <div class="title">Section 1</div>
            <div class="normalscroll">
                <h1>Test</h1><h1>Test</h1><h1>Test</h1><h1>Test</h1>
                <h1>Test</h1><h1>Test</h1><h1>Test</h1><h1>Test</h1>
                <h1>Test</h1><h1>Test</h1><h1>Test</h1><h1>Test</h1>
                <h1>Test</h1><h1>Test</h1><h1>Test</h1><h1>Test</h1>
            </div>
        </div>
        <div class="section" id="section2">Some section</div>
        <div class="section" id="section3">Some section</div>
        <div class="section" id="section4">Some section</div>
    </div>


    <div id="fullpage-auto-height" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section fp-auto-height" id="section2">
            <div class="slide"><div class="content">Slide 1</div></div>
            <div class="slide"><div class="content">Slide 2</div></div>
            <div class="slide"><div class="content">Slide 3</div></div>
            <div class="slide"><div class="content">Slide 4</div></div>
        </div>
        <div class="section fp-auto-height" id="section3"><div class="content">Some section</div></div>
        <div class="section fp-auto-height" id="section4"><div class="content">Some section</div></div>
    </div>

    <div id="fullpage-custom-selector" class="fullpage-layout">
        <div class="custom-section-selector" id="section1">Some section</div>
        <div class="custom-section-selector fp-auto-height" id="section2">
            <div class="slide">Slide 1</div>
            <div class="slide">Slide 2</div>
            <div class="slide">Slide 3</div>
            <div class="slide">Slide 4</div>
        </div>
        <div class="custom-section-selector fp-auto-height" id="section3"><div class="content">Some section</div></div>
        <div class="custom-section-selector fp-auto-height" id="section4"><div class="content">Some section</div></div>
    </div>

    <div id="fullpage-custom-slide-selector" class="fullpage-layout">
        <div class="section" id="section1">Some section</div>
        <div class="section fp-auto-height" id="section2">
            <div class="custom-slide-selector">Slide 1</div>
            <div class="custom-slide-selector">Slide 2</div>
            <div class="custom-slide-selector">Slide 3</div>
            <div class="custom-slide-selector">Slide 4</div>
        </div>
        <div class="section fp-auto-height" id="section3"><div class="content">Some section</div></div>
        <div class="section fp-auto-height" id="section4"><div class="content">Some section</div></div>
    </div>

    <div id="fullpage-multiple-selectors" class="fullpage-layout">
        <div class="selector1" id="section1" data-anchor="page1">Some section</div>
        <div class="section" id="section2" data-anchor="page2">
            <div class="custom-slide-selector">Slide 1</div>
            <div class="custom-slide-selector">Slide 2</div>
            <div class="custom-slide-selector">Slide 3</div>
        </div>
        <div class="selector1" id="section3" data-anchor="page3"><div class="content">Some section</div></div>
        <div class="section" id="section4" data-anchor="page4"><div class="content">Some section</div></div>
    </div>
</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script type="text/javascript" src="https://code.jquery.com/qunit/qunit-2.5.1.js"></script>
<script type="text/javascript" src="../src/fullpage.js"></script>
<script type="text/javascript">

</script>
<script type="text/javascript" src="utils.js"></script>
<!--

//done
<script type="text/javascript" src="./unit/setAutoScrolling.js"></script>
<script type="text/javascript" src="./unit/moveSectionDown.js"></script>
<script type="text/javascript" src="./unit/moveSectionUp.js"></script>
<script type="text/javascript" src="./unit/callbacks.js"></script>
<script type="text/javascript" src="./unit/callbacksV3.js"></script>
<script type="text/javascript" src="./unit/moveSlideLeft.js"></script>
<script type="text/javascript" src="./unit/moveSlideRight.js"></script>
<script type="text/javascript" src="./unit/lazyload.js"></script>
<script type="text/javascript" src="./unit/arrows.js"></script>
<script type="text/javascript" src="./unit/destroy.js"></script>
<script type="text/javascript" src="./unit/displayWarnings.js"></script>
<script type="text/javascript" src="./unit/loopTop.js"></script>
<script type="text/javascript" src="./unit/loopBottom.js"></script>
<script type="text/javascript" src="./unit/lockAnchors.js"></script>
<script type="text/javascript" src="./unit/menu.js"></script>
<script type="text/javascript" src="./unit/nav.js"></script>
<script type="text/javascript" src="./unit/silentMoveTo.js"></script>
<script type="text/javascript" src="./unit/moveTo.js"></script>
<script type="text/javascript" src="./unit/scrollingSpeed.js"></script>
<script type="text/javascript" src="./unit/setAllowScrolling.js"></script>
<script type="text/javascript" src="./unit/keyboardScrolling.js"></script>
<script type="text/javascript" src="./unit/slidesNavigation.js"></script>
<script type="text/javascript" src="./unit/scrollBar.js"></script>
<script type="text/javascript" src="./unit/easingcss3.js"></script>
<script type="text/javascript" src="./unit/continuousVertical.js"></script>
<script type="text/javascript" src="./unit/normalScrollElements.js"></script>
<script type="text/javascript" src="./unit/verticalCentered.js"></script>
<script type="text/javascript" src="./unit/sectionsColor.js"></script>
<script type="text/javascript" src="./unit/paddings.js"></script>
<script type="text/javascript" src="./unit/selectors.js"></script>
<script type="text/javascript" src="./unit/fitToSection.js"></script>
<script type="text/javascript" src="./unit/responsiveWidth.js"></script>
<script type="text/javascript" src="./unit/responsiveHeight.js"></script>
<script type="text/javascript" src="./unit/fixedElements.js"></script>


//todo

<script type="text/javascript" src="./unit/recordHistory.js"></script>
<script type="text/javascript" src="./unit/reBuild.js"></script>
<script type="text/javascript" src="./unit/scrollOverflow.js"></script>
-->

<script type="text/javascript" src="./unit/setAutoScrolling.js"></script>
<script type="text/javascript" src="./unit/moveSectionDown.js"></script>
<script type="text/javascript" src="./unit/moveSectionUp.js"></script>
<script type="text/javascript" src="./unit/callbacks.js"></script>
<script type="text/javascript" src="./unit/callbacksV3.js"></script>
<script type="text/javascript" src="./unit/moveSlideLeft.js"></script>
<script type="text/javascript" src="./unit/moveSlideRight.js"></script>
<script type="text/javascript" src="./unit/lazyload.js"></script>
<script type="text/javascript" src="./unit/arrows.js"></script>
<script type="text/javascript" src="./unit/destroy.js"></script>
<script type="text/javascript" src="./unit/displayWarnings.js"></script>
<script type="text/javascript" src="./unit/loopTop.js"></script>
<script type="text/javascript" src="./unit/loopBottom.js"></script>
<script type="text/javascript" src="./unit/lockAnchors.js"></script>
<script type="text/javascript" src="./unit/menu.js"></script>
<script type="text/javascript" src="./unit/nav.js"></script>
<script type="text/javascript" src="./unit/silentMoveTo.js"></script>
<script type="text/javascript" src="./unit/moveTo.js"></script>
<script type="text/javascript" src="./unit/scrollingSpeed.js"></script>
<script type="text/javascript" src="./unit/setAllowScrolling.js"></script>
<script type="text/javascript" src="./unit/keyboardScrolling.js"></script>
<script type="text/javascript" src="./unit/slidesNavigation.js"></script>
<script type="text/javascript" src="./unit/scrollBar.js"></script>
<script type="text/javascript" src="./unit/easingcss3.js"></script>
<script type="text/javascript" src="./unit/continuousVertical.js"></script>
<script type="text/javascript" src="./unit/normalScrollElements.js"></script>
<script type="text/javascript" src="./unit/verticalCentered.js"></script>
<script type="text/javascript" src="./unit/sectionsColor.js"></script>
<script type="text/javascript" src="./unit/paddings.js"></script>
<script type="text/javascript" src="./unit/selectors.js"></script>
<script type="text/javascript" src="./unit/fitToSection.js"></script>
<script type="text/javascript" src="./unit/responsiveWidth.js"></script>
<script type="text/javascript" src="./unit/responsiveHeight.js"></script>
<script type="text/javascript" src="./unit/fixedElements.js"></script>
</body>
</html>
